<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学海书舫图书馆</title>
    <link rel="Shortcut Icon" href="./favicon.ico">
    <!--    引入相关样式和js（照抄）-->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/rederIndex.css">
    <script src="./js/Vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
</head>

<body>
    <!--    确定容器，所有代码都要在这个容器内写，id名任意-->
    <div id="main">
        <el-menu class="el-menu-demo" mode="horizontal" @select="changeOption" :default-active="changeActive">
            <el-menu-item class="caption" index="title">&nbsp;&nbsp;&nbsp;&nbsp;学海书舫图书馆</el-menu-item>
            <el-menu-item index="changeBookList"><i class="el-icon-notebook-2"></i>书籍列表</el-menu-item>
            <el-menu-item index="changeBorrowInfoList"><i class="el-icon-reading"></i>借书列表</el-menu-item>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-chat-line-square"></i>留言</template>
                <el-menu-item index="changeAddMessage">
                    <i class="el-icon-edit-outline"></i>添加留言</el-menu-item>
                <el-menu-item index="changeMessageList"><i class="el-icon-tickets"></i>留言列表</el-menu-item>
            </el-submenu>
            <el-menu-item style="float: right;" index="user">
                <el-dropdown @command="handleCommand">
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="lookReader">查看</el-dropdown-item>
                        <el-dropdown-item>登出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <template @click="logout" :underline="false"
                    icon="el-icon-user">{{this.loginUser.readerName}}，欢迎您</template>
            </el-menu-item>
        </el-menu>


        <el-container style="height: 53em">
            <el-aside width="250px">
                <el-table v-loading="tableLoading"
                    :data="announcement.filter(data => !announcementSearch || data.announcementTitle.toLowerCase().includes(announcementSearch.toLowerCase()))">
                    <el-table-column prop="announcementTitle">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="announcementSearch" size="mini" placeholder="输入关键字搜索" />
                        </template>
                        <template slot-scope="scope">
                            <el-link type="primary"
                                @click="showAnnouncement(scope.row.announcementId)">{{scope.row.announcementTitle}}</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-aside>
            <el-main>
                <!-- 书籍列表 -->
                <div id="changeBookList" style="display: block">
                    <!-- 搜索表单 -->
                    <el-dialog :visible.sync="searchBook" width="24%">
                        <el-form ref="form" :model="bookForm" label-width="70px">
                            <el-form-item label="书名">
                                <el-input v-model="bookForm.bookName" placeholder="西游记"></el-input>
                            </el-form-item>
                            <el-form-item label="作者">
                                <el-input v-model="bookForm.bookAuthor" placeholder="吴承恩"></el-input>
                            </el-form-item>
                            <el-form-item label="出版社">
                                <el-input v-model="bookForm.bookPublish" placeholder="人民文学出版社"></el-input>
                            </el-form-item>
                            <el-form-item label="ISBN">
                                <el-input v-model="bookForm.iSBN" placeholder="978-7-0201-6346-5"></el-input>
                            </el-form-item>
                            <el-form-item label="位置">
                                <el-cascader v-model="bookForm.bookLocationArray" :options="bookLocations"
                                    :props="{ checkStrictly: true }"></el-cascader>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-select v-model="bookForm.bookType" filterable default-first-option
                                    placeholder="请选择类型">
                                    <el-option v-for="item in bookTypes" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="bookForm.bookState">
                                    <el-option label="遗失" value="-11"></el-option>
                                    <el-option label="在馆" value="11"></el-option>
                                    <el-option label="借出" value="10"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchBooks('determine')">查询</el-button>
                                <el-button @click="searchBooks('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <template>
                        <span style="display: inline-block; margin-left: 20px"></span>
                        <el-button @click="borrowBooks" icon="el-icon-folder-add"
                            :disabled="availabilityOfBooks()">借阅所选</el-button>
                        <span style="display: inline-block; margin-left: 20px"></span>
                        <el-button type="primary" plain @click="searchBook = true"
                            icon="el-icon-search">搜索书籍</el-button>
                    </template>

                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="50.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="编号">
                                        <span>{{ props.row.bookId }}</span>
                                    </el-form-item>
                                    <el-form-item label="ISBN">
                                        <span>{{ props.row.iSBN }}</span>
                                    </el-form-item>
                                    <el-form-item label="书名">
                                        <span>{{ props.row.bookName }}</span>
                                    </el-form-item>
                                    <el-form-item label="作者">
                                        <span>{{ props.row.bookAuthor }}</span>
                                    </el-form-item>
                                    <el-form-item label="出版社">
                                        <span>{{ props.row.bookPublish }}</span>
                                    </el-form-item>
                                    <el-form-item label="价格">
                                        <span>{{ props.row.bookPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="类型">
                                        <span>{{ props.row.bookType }}</span>
                                    </el-form-item>
                                    <el-form-item label="位置">
                                        <span>{{ props.row.bookLocation }}</span>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <span>{{ props.row.bookStateStr }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="bookId" label="编号" align="center">
                        </el-table-column>
                        <el-table-column prop="bookName" label="书名" align="center">
                        </el-table-column>
                        <el-table-column prop="bookAuthor" label="作者" align="center">
                        </el-table-column>
                        <el-table-column prop="bookPublish" label="出版社" align="center">
                        </el-table-column>
                        <el-table-column prop="bookStateStr" label="状态" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="222">
                            <template slot-scope="scope">
                                <el-button @click="borrowBook(scope.row.bookId)" :disabled="scope.row.bookState !== 11"
                                    icon="el-icon-folder-add">借书</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页工具条-->
                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBookList')"
                            @current-change="changeCurrentPage($event, 'changeBookList')" :current-page="currentPage"
                            :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>

                <!-- 借书列表 -->
                <div id="changeBorrowInfoList" style="display: none;">
                    <template>
                        <el-button @click="returnBooks" :disabled="this.MultipleSelection.length === 0? true: false"
                            icon="el-icon-folder-remove">归还所选</el-button>
                        <span style="display: inline-block; margin-left: 3px"></span>
                        <el-button type="danger" plain @click="lostBooks"
                            :disabled="this.MultipleSelection.length === 0? true: false"
                            icon="el-icon-folder-remove">挂失所选</el-button>
                        <span style="display: inline-block; margin-left: 3px"></span>
                        <el-form :inline="true" :model="borrowInfoForm" class="demo-form-inline"
                            style="display: inline;">
                            <el-form-item label="书籍编号">
                                <el-input v-model="borrowInfoForm.bookId" placeholder="1"></el-input>
                            </el-form-item>
                            <el-form-item label="书籍名称">
                                <el-input v-model="borrowInfoForm.bookName" placeholder="西游记"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchBorrowInfoByBook"
                                    icon="el-icon-search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="bookId" label="书籍编号" align="center">
                        </el-table-column>
                        <el-table-column prop="bookName" label="书籍名称" align="center">
                        </el-table-column>
                        <el-table-column prop="borrowTime, returnTime" label="时间" align="center">
                            <template slot-scope="scope">
                                {{scope.row.borrowedTime}} ~ {{scope.row.returnTime}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="arrears" label="欠费" align="center">
                            <template slot-scope="scope">
                                {{scope.row.arrears}} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="danger" plain @click="lostBook(scope.row.bookId)"
                                    icon="el-icon-delete">挂失</el-button>
                                <el-button @click="returnBook(scope.row.bookId, scope.row.arrears)"
                                    icon="el-icon-delete">归还</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBorrowPageSize')"
                            @current-change="changeCurrentPage($event, 'changeBorrowInfoList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>

                <!-- 查看，修改读者 -->
                <el-dialog :visible.sync="lookReaderFormPopUp" width="24%" :before-close="handleClose">
                    <el-form ref="form" :model="readerForm" label-width="70px" :disabled="disabledReviseReader">
                        <el-form-item label="用户名">
                            <el-input v-model="readerForm.readerName" placeholder="张三"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="readerForm.readerSex" filterable default-first-option
                                placeholder="请选择性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="readerForm.readerEmail" placeholder="zhangsan@163.com"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="readerForm.readerPhone" placeholder="19856448731"></el-input>
                        </el-form-item>
                    </el-form>
                    <span style="margin-left: 85px">
                        <el-button id="reviseReader" type="primary" @click="reviseReader('determine')">修改</el-button>
                        <el-button @click="reviseReader('cancel')">取消</el-button>
                    </span>
                </el-dialog>

                <!-- 公告列表 -->
                <div id="changeAnnouncementList" style="display: none; ">
                    <div class="announcement">
                        <h1 style="text-align: center;">{{this.announcementForm.announcementTitle}}
                        </h1>
                        <p id="announcementContent" style="margin-top: 6%;"></p>
                    </div>

                </div>

                <!-- 添加留言 -->
                <div id="changeAddMessage" style="display: none;">
                    <el-form :model="messageForm" class="demo-form-inline">
                        <el-form-item label="留言标题">
                            <el-input v-model="messageForm.messageTitle" placeholder="请输入标题"></el-input>
                        </el-form-item>
                        <el-form-item label="留言内容">
                            <el-input type="textarea" rows="18" v-model="messageForm.messageContent"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addMessage">添加</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 消息列表 -->
                <div id="changeMessageList" style="display: none">
                    <template>
                        <el-button @click="readMessages" icon="el-icon-folder-add"
                            :disabled="allReadered">一键已读</el-button>
                        <el-form :inline="true" :model="messageForm" class="demo-form-inline" style="display: inline;">
                            <el-form-item style="margin-bottom: 0;">
                                <el-input v-model="messageForm.messageTitle" placeholder="消息标题"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 0;">
                                <el-input v-model="messageForm.messageContent" placeholder="消息内容"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 0;">
                                <el-select v-model="messageForm.messageReturnState" placeholder="请选择消息状态">
                                    <el-option label="未读" value="0"></el-option>
                                    <el-option label="已读" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 0;">
                                <el-select v-model="messageForm.messageState" placeholder="请选择回复状态">
                                    <el-option label="未读" value="0"></el-option>
                                    <el-option label="已回" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 0;">
                                <el-button type="primary" @click="searchMessageByMessageId"
                                    icon="el-icon-search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="消息内容">
                                        <span>{{ props.row.messageContent }}</span>
                                    </el-form-item>
                                    <el-form-item label="回复内容">
                                        <span>{{ props.row.messageReturn }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column prop="messageId" label="消息编号" align="center">
                        </el-table-column>
                        <el-table-column prop="messageTitle" label="消息标题" align="center">
                        </el-table-column>
                        <el-table-column prop="messageStateStr, messageReturnStateStr" label="消息状态" align="center">
                            <template slot-scope="scope">
                                {{scope.row.messageStateStr === '未读' ? '未读' : scope.row.messageReturnStateStr === '已读' ?
                                '已读' : '已回 未读'}}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="readMessage(scope.row)" icon="el-icon-finished"
                                    :disabled="scope.row.messageReturnState === 1 || scope.row.messageState === 0">已读</el-button>
                                <el-button type="danger" plain @click="deleteMessage(scope.row.messageId)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBorrowPageSize')"
                            @current-change="changeCurrentPage($event, 'changeBorrowInfoList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>

    </div>
</body>
<script>
    new Vue({
        el: "#main",
        mounted() {
            this.getUser()
            this.selectBookByPageAndTerms()
            this.selectAllBookType()
            this.getAnnouncementTitle()
        },
        methods: {
            availabilityOfBooks() {
                let bool = 0;
                this.MultipleSelection.forEach(book => {
                    book.bookState === 11 ? bool : bool += 1;
                })
                return (this.MultipleSelection.length !== 0 && bool === 0 ? false : true)
            },

            handleCommand(command) {
                if (command === 'lookReader') {
                    this.lookReader()
                } else {
                    this.logout()
                }
            },

            // 登出用户
            logout() {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/login/logoutReader'
                }).then(resp => {
                    location.reload();
                })
            },
            // 获取登录用户
            getUser() {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/reader/getUser'
                }).then(resp => {
                    this.loginUser = resp.data
                    this.borrowInfoForm.readerName = resp.data.readerName
                    this.messageForm = { messageId: null, readerId: resp.data.readerId, messageTitle: "", messageContent: "", messageState: null, readerName: resp.data.readerName, messageReturn: "", messageReturnState: null };
                })
            },
            // 切换选项的函数
            changeOption(key, keyPath) {
                this.currentPage = 1;
                this.pageSize = 10;
                this.tableData = [];
                this.navigations.forEach(element => {
                    let elementById = document.getElementById(element);
                    elementById.style.display = "none"
                });
                if (key === 'title' || key === 'user') {
                    this.changeActive = 'changeBookList';
                    document.getElementById('changeBookList').style.display = "block";
                    this.selectBookByPageAndTerms()
                } else {
                    this.changeActive = key;
                    document.getElementById(key).style.display = "block";
                }
                if (key === 'changeBookList') {
                    this.selectBookByPageAndTerms()
                } else if (key === 'changeBorrowInfoList') {
                    this.selectBorrowInfoByPageAndBookTerms()
                } else if (key === 'changeMessageList') {
                    this.selectMessageByPageANdTerms()
                }
            },

            // 书籍弹窗的确认关闭弹窗
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            // 获取多选选项的列表
            handleSelectionChange(val) {
                this.MultipleSelection = val;
            },

            // 每页显示条数变换时获取新的条数并重新查询
            changePageSize(val, key) {
                this.pageSize = val;
                key === 'changeBookList' ? this.selectBookByPageAndTerms() : key === 'changeBorrowInfoList' ? this.selectBorrowInfoByPageAndBookTerms() : null;
            },

            // 页码变换时获取新的页码并重新查询
            changeCurrentPage(val, key) {
                this.currentPage = val
                key === 'changeBookList' ? this.selectBookByPageAndTerms() : key === 'changeBorrowInfoList' ? this.selectBorrowInfoByPageAndBookTerms() : null;
            },

            // 表格每行颜色样式
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },


            /**
             * 书籍管理
             * */
            // 分页条件查询
            selectBookByPageAndTerms() {
                console.log(this.bookForm)
                axios({
                    method: "post",
                    url: "http://localhost:9090/BookManage/book/selectBookByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.bookForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 查询所有书籍的类型
            selectAllBookType() {
                axios({
                    method: "get",
                    url: "http://localhost:9090/BookManage/book/selectAllBookType"
                }).then(resp => {
                    this.bookTypes = []
                    for (const type in resp.data) {
                        this.bookTypes.push({ value: resp.data[type], label: resp.data[type] })
                    }
                })
            },

            // 提交查询条件
            searchBooks(key) {
                this.currentPage = 1
                if (key === 'cancel') {
                    this.bookForm = { bookId: null, bookAuthor: "", bookId: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" };
                    this.selectBookByPageAndTerms();
                } else if (key === 'determine') {
                    this.selectBookByPageAndTerms();
                    this.bookForm = { bookId: null, bookAuthor: "", bookId: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" };
                }
                this.searchBook = false;
            },

            //借书查询 
            selectBorrowInfoByPageAndBookTerms() {
                axios({
                    method: "post",
                    url: "http://localhost:9090/BookManage/borrowInfo/selectBorrowInfoByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.borrowInfoForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 批量借书
            borrowBooks() {
                let bookIds = [];
                this.MultipleSelection.forEach(book => {
                    bookIds.push(book.bookId)
                })
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/borrowInfo/borrowBooks',
                    data: {
                        bookIds: bookIds,
                        readerId: this.loginUser.readerId
                    }
                }).then(resp => {
                    if (resp.data === '借书成功') {
                        const now = new Date();
                        const date = new Date(now.setDate(now.getDate() + 10))
                        this.$message({
                            message: '借书成功，请在 ' + date.getFullYear() + ' 年 ' + (date.getMonth() + 1) + ' 月 ' + date.getDate() + ' 日 前归还图书',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: resp.data,
                            type: 'error'
                        });
                    }
                    this.selectBookByPageAndTerms()
                    this.MultipleSelection = []
                })
            },

            // 借书
            borrowBook(bookId) {
                let bookIds = [bookId]
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/borrowInfo/borrowBooks',
                    data: {
                        bookIds: bookIds,
                        readerId: this.loginUser.readerId
                    }
                }).then(resp => {
                    if (resp.data === '借书成功') {
                        const now = new Date();
                        const date = new Date(now.setDate(now.getDate() + 10))
                        this.$message({
                            message: '借书成功，请在 ' + date.getFullYear() + ' 年 ' + (date.getMonth() + 1) + ' 月 ' + date.getDate() + ' 日 前归还图书',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: resp.data,
                            type: 'error'
                        });
                    }
                    this.bookForm = { bookId: null, bookAuthor: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" }
                    this.currentPage = 1;
                    this.pageSize = 10
                    this.selectBookByPageAndTerms()
                });
            },

            // 批量挂失书籍 
            lostBooks() {
                this.$alert(`需缴纳 ${this.MultipleSelection.length * 10.00} 元`, {
                    confirmButtonText: '确定',
                    callback: action => {
                        axios({
                            method: 'post',
                            url: 'http://localhost:9090/BookManage/borrowInfo/lostBooks',
                            data: this.MultipleSelection
                        }).then(resp => {
                            if (resp.data === 'success') {
                                this.$message({
                                    message: '挂失完成',
                                    type: 'success'
                                })
                            } else if (resp.data === 'failure') {
                                this.$message.error('挂失失败');
                            } else {
                                this.$message.error('未知错误');
                            }
                            this.currentPage = 1;
                            this.selectBorrowInfoByPageAndBookTerms();
                        })
                    }
                });
            },

            // 挂失书籍
            lostBook(bookId) {
                this.$alert(`需缴纳 ${10.00} 元`, {
                    confirmButtonText: '确定',
                    callback: action => {
                        axios({
                            method: 'get',
                            url: 'http://localhost:9090/BookManage/borrowInfo/lostBook?bookId=' + bookId,
                        }).then(resp => {
                            if (resp.data === 'success') {
                                this.$message({
                                    message: '挂失完成',
                                    type: 'success'
                                })
                            } else if (resp.data === 'failure') {
                                this.$message.error('挂失失败');
                            } else {
                                this.$message.error('未知错误');
                            }
                            this.currentPage = 1;
                            this.selectBorrowInfoByPageAndBookTerms();
                        })
                    }
                });
            },

            // 查询借书信息
            searchBorrowInfoByBook() {
                this.currentPage = 1
                this.selectBorrowInfoByPageAndBookTerms();
                this.borrowInfoForm = { bookId: null, bookName: "", readerId: "", readerName: this.loginUser.readerName, borrowedTime: "", returnTime: "", arrears: null }
            },

            // 批量归还书籍
            returnBooks() {
                let arrears = 0;
                this.MultipleSelection.forEach(borrowInfo => { arrears += Number(borrowInfo.arrears) })
                this.$alert(`需缴纳 ${arrears} 元`, {
                    confirmButtonText: '确定',
                    callback: action => {
                        axios({
                            method: 'post',
                            url: 'http://localhost:9090/BookManage/borrowInfo/returnBooks',
                            data: this.MultipleSelection
                        }).then(resp => {
                            if (resp.data === 'success') {
                                this.$message({
                                    message: '归还完成',
                                    type: 'success'
                                })
                            } else if (resp.data === 'failure') {
                                this.$message.error('归还失败');
                            } else {
                                this.$message.error('未知错误');
                            }
                            this.currentPage = 1;
                            this.selectBorrowInfoByPageAndBookTerms();
                        })
                    }
                });
            },

            // 归还书籍
            returnBook(bookId, arrears) {
                this.$alert(`需缴纳 ${arrears} 元`, {
                    confirmButtonText: '确定',
                    callback: action => {
                        axios({
                            method: 'get',
                            url: 'http://localhost:9090/BookManage/borrowInfo/returnBook?bookId=' + bookId,
                        }).then(resp => {
                            if (resp.data === 'success') {
                                this.$message({
                                    message: '归还完成',
                                    type: 'success'
                                })
                            } else if (resp.data === 'failure') {
                                this.$message.error('归还失败');
                            } else {
                                this.$message.error('未知错误');
                            }
                            this.currentPage = 1;
                            this.selectBorrowInfoByPageAndBookTerms();
                        })
                    }
                });
            },

            /**
             * 人员管理
             * */
            // 查看读者弹窗
            lookReader() {
                this.readerForm.readerId = this.loginUser.readerId
                axios({
                    method: 'post',
                    url: "http://localhost:9090/BookManage/reader/selectReaderByPageAndTerms?currentPage=1&pageSize=1",
                    data: this.readerForm
                }).then(resp => {
                    this.readerForm = resp.data.rows[0]
                })
                this.lookReaderFormPopUp = true;
            },

            //修改读者函数
            reviseReader(key) {
                if (key === 'cancel') {
                    this.lookReaderFormPopUp = false;
                    this.disabledReviseReader = true;
                    document.getElementById('reviseReader').innerText = '修改';
                    return;
                }
                if (document.getElementById('reviseReader').innerText === '修改') {
                    this.disabledReviseReader = false
                    document.getElementById('reviseReader').innerText = '确认'
                    return;
                }
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/reader/updateReaderById?readerStateValue=true',
                        data: this.readerForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '修改完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'failure') {
                            this.$message.error('修改失败');
                        } else {
                            this.$message.error('未知错误');
                        }

                    })
                }
                this.readerform = { readerId: this.loginUser.readerId, readerId: '', readerName: this.loginUser.readerName, readerSex: '', readerPhone: '', readerPassword: '', readerArrears: '', readerState: '', readerEmail: '' };
                this.lookReaderFormPopUp = false;
                this.disabledReviseReader = true;
                document.getElementById('reviseReader').innerText = '修改';
            },

            /**
             * 信息管理
             * */
            // 查看公告详情
            showAnnouncement(announcementId) {
                this.announcementForm = { announcementId: announcementId, announcementTitle: "", announcementContent: "" };
                axios({
                    method: 'post',
                    url: "http://localhost:9090/BookManage/announcement/selectAnnouncementByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.announcementForm
                }).then(resp => {
                    this.announcementForm = resp.data.rows[0];
                    console.log(this.announcementForm.announcementContent)
                    document.getElementById('announcementContent').innerHTML = this.announcementForm.announcementContent
                })

                this.changeOption('changeAnnouncementList', null);
            },

            getAnnouncementTitle() {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/announcement/selectAllAnnouncement'
                }).then(resp => {
                    this.announcement = resp.data
                })
            },

            // 添加留言
            addMessage() {
                console.log(this.messageForm)
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/message/insertMessage',
                    data: this.messageForm
                }).then(resp => {
                    this.messageForm = { messageId: null, readerId: this.loginUser.readerId, messageTitle: "", messageContent: "", messageState: null, readerName: this.loginUser.readerName, messageReturn: "", messageReturnState: null };
                    this.changeOption('changeMessageList', null);
                    if (resp.data === 'success') {
                        this.$message({
                            message: '留言成功，我们会尽快回复',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message({
                            message: '留言失败咯，请重新留言',
                            type: 'error'
                        })
                    } else {
                        this.$message({
                            message: '未知错误',
                            type: 'error'
                        })
                    }
                })
            },

            // 消息查询
            selectMessageByPageANdTerms() {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/message/selectMessageByPageAndTerms?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize,
                    data: this.messageForm
                }).then(resp => {
                    let i = 0;
                    resp.data.rows.forEach(message => {
                        if (message.messageState === 1 && message.messageReturnState == 0) {
                            i++
                        }
                    })
                    i > 0 ? this.allReadered = false : this.allReadered = true;
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 搜索条件
            searchMessageByMessageId() {
                this.currentPage = 1;
                this.selectMessageByPageANdTerms();
                this.messageForm = { messageId: null, readerId: this.loginUser.readerId, messageTitle: "", messageContent: "", messageState: null, readerName: this.loginUser.readerName, messageReturn: "", messageReturnState: null };
            },

            // 已读所有留言
            readMessages() {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/message/readMessageByReaderId',
                    data: this.messageForm
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '一键已读完成',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message({
                            message: '一键已读失败',
                            type: 'error'
                        })
                    } else {
                        this.$message({
                            message: '未知错误',
                            type: 'error'
                        })
                    }
                    this.messageForm = { messageId: null, readerId: this.loginUser.readerId, messageTitle: "", messageContent: "", messageState: null, readerName: this.loginUser.readerName, messageReturn: "", messageReturnState: null };
                    this.selectMessageByPageANdTerms();
                })
            },

            // 已读留言
            readMessage(message) {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/message/readMessageByMessageId',
                    data: message
                }).then(resp => {
                    this.messageForm = { messageId: null, readerId: this.loginUser.readerId, messageTitle: "", messageContent: "", messageState: null, readerName: this.loginUser.readerName, messageReturn: "", messageReturnState: null };
                    this.selectMessageByPageANdTerms();
                })
            },

            // 删除留言
            deleteMessage(messageId) {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/message/deleteMessageByMessageId',
                    data: messageId
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message({
                            message: '删除失败失败',
                            type: 'error'
                        })
                    } else {
                        this.$message({
                            message: '未知错误',
                            type: 'error'
                        })
                    }
                    this.messageForm = { messageId: null, readerId: this.loginUser.readerId, messageTitle: "", messageContent: "", messageState: null, readerName: this.loginUser.readerName, messageReturn: "", messageReturnState: null };
                    this.selectMessageByPageANdTerms();
                })
            },
        },

        data() {
            // 所有变量（包括类）都写在下面的return里面
            return {
                allReadered: false,
                loginUser: {
                    readerId: '',
                    readerName: ''
                },
                // 导航栏高亮 key
                changeActive: 'changeBookList',
                // 书籍表格类的列表
                tableData: [],
                // 当前页码
                currentPage: 1,
                // 每页显示的条数
                pageSize: 10,
                // 总条数
                totalData: 200,
                /**
                 * 书籍列表
                 * */
                // 搜索书籍弹窗控制变量
                searchBook: false,
                // 书籍类型的选项
                bookTypes: [],
                // 导航选项的 id
                navigations: ["changeBookList", "changeBorrowInfoList", "changeAnnouncementList", "changeMessageList", "changeAddMessage", "changeAnnouncementList"],
                // 多选的列表
                MultipleSelection: [],
                // 书籍表单类
                bookForm: {
                    bookId: null,
                    bookAuthor: "",
                    bookLocation: "",
                    bookLocationArray: [],
                    bookName: "",
                    bookPublish: "",
                    bookState: "",
                    bookType: "",
                    iSBN: ""
                },
                // 书籍位置列表类
                bookLocations: [{
                    value: '第一借阅厅',
                    label: '第一借阅厅',
                    children: [{
                        value: 'A排',
                        label: 'A排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'B排',
                        label: 'B排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'C排',
                        label: 'C排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'D排',
                        label: 'D排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'E排',
                        label: 'E排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'F排',
                        label: 'F排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'G排',
                        label: 'G排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'H排',
                        label: 'H排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'I排',
                        label: 'I排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'J排',
                        label: 'J排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'K排',
                        label: 'K排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'L排',
                        label: 'L排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'M排',
                        label: 'M排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'N排',
                        label: 'N排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'O排',
                        label: 'O排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'P排',
                        label: 'P排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Q排',
                        label: 'Q排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'R排',
                        label: 'R排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'S排',
                        label: 'S排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'T排',
                        label: 'T排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'U排',
                        label: 'U排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'V排',
                        label: 'V排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'W排',
                        label: 'W排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'X排',
                        label: 'X排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Y排',
                        label: 'Y排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Z排',
                        label: 'Z排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }]
                }, {
                    value: '第二借阅厅',
                    label: '第二借阅厅',
                    children: [{
                        value: 'A排',
                        label: 'A排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'B排',
                        label: 'B排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'C排',
                        label: 'C排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'D排',
                        label: 'D排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'E排',
                        label: 'E排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'F排',
                        label: 'F排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'G排',
                        label: 'G排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'H排',
                        label: 'H排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'I排',
                        label: 'I排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'J排',
                        label: 'J排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'K排',
                        label: 'K排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'L排',
                        label: 'L排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'M排',
                        label: 'M排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'N排',
                        label: 'N排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'O排',
                        label: 'O排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'P排',
                        label: 'P排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Q排',
                        label: 'Q排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'R排',
                        label: 'R排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'S排',
                        label: 'S排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'T排',
                        label: 'T排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'U排',
                        label: 'U排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'V排',
                        label: 'V排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'W排',
                        label: 'W排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'X排',
                        label: 'X排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Y排',
                        label: 'Y排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Z排',
                        label: 'Z排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }]
                }],
                // 表格遮罩层控制变量
                tableLoading: true,
                /**
                 * 借书查询（书籍）
                */
                borrowInfoForm: {
                    bookId: null,
                    bookName: "",
                    readerId: "",
                    readerName: "",
                    borrowedTime: "",
                    returnTime: "",
                    arrears: null
                },


                /**
                 * 添加读者
                 * */
                // 是否禁用修改读者
                disabledReviseReader: true,
                // 添加读者弹窗控制变量
                addReaderFormPopUp: false,
                // 读者表单
                readerForm: {
                    readerId: null,
                    readerName: "",
                    readerSex: "",
                    readerPhone: "",
                    readerPassword: "",
                    readerArrears: "",
                    readerState: "",
                    readerEmail: ""
                },
                // 搜索读者条件弹窗
                searchReader: false,
                // 查看读者信息弹窗
                lookReaderFormPopUp: false,


                /**
                 * 信息管理
                 */

                // 公告表单
                announcementForm: {
                    announcementId: null,
                    announcementTitle: "",
                    announcementContent: ""
                },

                announcementSearch: "",
                announcement: [],

                // 消息表单
                messageForm: {
                    messageId: null,
                    readerId: null,
                    messageTitle: "",
                    messageContent: "",
                    messageState: null,
                    readerName: "",
                    messageReturn: "",
                    messageReturnState: null
                },
            }
        }
    })
</script>

</html>